<template>
	<view class="content">
		<up-row class="up-row" gutter="10" justify="center">
			<up-col span="6">
				<view class="item">
					<view class="title">
						<view class="ordinal greenbg">1</view>
						<view class="title_name">地头宽</view>
					</view>
					<view class="value">{{ pageData.ridgeWidth }}</view>
				</view>
			</up-col>
			<up-col span="6">
				<view class="item">
					<view class="title">
						<view class="ordinal greenbg">2</view>
						<view class="title_name">总垄数</view>
					</view>
					<view class="value">{{ pageData.totalRidgeCount }}</view>
				</view>
			</up-col>
		</up-row>
		<up-row class="up-row" gutter="10" justify="center">
			<up-col span="6">
				<view class="item">
					<view class="title">
						<view class="ordinal greenbg">3</view>
						<view class="title_name">平均垄长</view>
					</view>
					<view class="value">{{ pageData.avgRidgeLength }}</view>
				</view>
			</up-col>

			
			<up-col span="6">
				<view class="item">
					<view class="title">
						<view class="ordinal">4</view>
						<view class="title_name">垄距</view>
					</view>
					<view class="value">总垄数/4={{ pageData.ridgeDistance }}</view>
				</view>
			</up-col>
		</up-row>
		<up-row class="up-row" gutter="10" justify="center">
			<up-col span="6">
				<view class="item">
					<view class="title">
						<view class="ordinal">5</view>
						<view class="title_name">样本位置</view>
					</view>
					<view class="value">平均垄长/4={{ pageData.sampleLocation }}</view>
				</view>
			</up-col>

			<up-col span="6">
				<view class="item">
					<view class="title">
						<view class="ordinal">6</view>
						<view class="title_name">平均垄宽</view>
					</view>
					<view class="value">地头宽/总垄数={{ pageData.avgRidgeWidth }}</view>
				</view>
			</up-col>
		</up-row>
		<up-row class="up-row" gutter="10" justify="center">
			<up-col span="12">
				<view class="item">
					<view class="title">
						<view class="ordinal">7</view>
						<view class="title_name">样本长度</view>
					</view>
					<view class="value">2.22/平均垄宽={{ pageData.sampleLength }}</view>
				</view>
			</up-col>
		</up-row>

		<view class="result">
			<view class="tip">取</view>
			<view class="list">
				<view class="list-item">
					<view class="ridgeDistance">
						第{{ pageData.ridgeDistance }}垄
					</view>
					<up-icon class="up-icon" name="arrow-rightward" size="33" color="#67c23a" />
					<view class="sampleLocation">
						第{{ pageData.sampleLocation }}米
					</view>
				</view>
				<view class="list-item">
					<view class="ridgeDistance">
						第{{ pageData.ridgeDistance*2 }}垄
					</view>
					<up-icon class="up-icon" name="arrow-rightward" size="33" color="#67c23a" />
					<view class="sampleLocation">
						第{{ pageData.sampleLocation*2 }}米
					</view>
				</view>
				<view class="list-item">
					<view class="ridgeDistance">
						第{{ pageData.ridgeDistance * 3 }}垄
					</view>
					<up-icon class="up-icon" name="arrow-rightward" size="33" color="#67c23a" />
					<view class="sampleLocation">
						第{{ Math.round(pageData.sampleLocation * 3 * 10) / 10 }}米
					</view>
				</view>
			</view>
			<view class="sampleStyle">
				样本点前后
				<br />
				各
				<text style="color: #f56c6c">{{ (pageData.sampleLength / 2).toFixed(2) }}</text>
				米
			</view>
		</view>
		<canvas canvas-id="firstCanvas" id="firstCanvas" style="width: 500px; height: 360px"></canvas>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup lang="ts" name="info">
	import { onMounted, onUnmounted, reactive, ref } from 'vue';
	import InfoClass from './info';
	import * as global from '@/static/global';

	const pageData = reactive(new InfoClass());
	const uToastRef = ref(null);

	try {
		const storedData = uni.getStorageSync(global.global_storageKey);
		if (storedData && storedData) {
			// 假设存储的数据格式是 { data: { ... } }
			for (let key in storedData) {
				if (storedData.hasOwnProperty(key)) {
					// 确保 key 是存储数据自身的属性
					pageData[key] = storedData[key];
				}
			}
		}
	} catch (e) {
		console.error('Error loading page data:', e);
	}

	onMounted(() => {
		canvas();
	});

	onUnmounted(() => {
		uni.$emit('clear_' + global.global_storageKey, '页面已销毁，清空数据');
	});

	const canvas = () => {
		var ctx = uni.createCanvasContext('firstCanvas', this);
		let width = 480,
			height = 340;

		// 绘制背景矩形
		ctx.setFillStyle('#f4f4f5'); // 或者你想要的任何颜色
		ctx.fillRect(0, 0, width + 20, height + 20);

		// 绘制上边框
		ctx.beginPath();
		ctx.moveTo(10, 10); // 起始点
		ctx.lineTo(width, 10); // 结束点
		ctx.strokeStyle = '#000000';
		ctx.lineWidth = 2;
		ctx.stroke();

		// 绘制下边框
		ctx.beginPath();
		ctx.moveTo(10, height); // 起始点
		ctx.lineTo(width, height); // 结束点
		ctx.stroke();

		// 假设要在600px宽的长方形内绘制12条垂直线
		const lineCount = pageData.totalRidgeCount as number;
		const lineSpacing = width / lineCount; // 加1是因为有13个间隔（12条线）
		const textOffsetY = 15; // 文本与线条之间的垂直偏移量
		const redLine1 = pageData.ridgeDistance - 1; // 3条线
		const redLine2 = pageData.ridgeDistance * 2 - 1; // 3条线
		const redLine3 = pageData.ridgeDistance * 3 - 1; // 3条线

		// 绘制垂直线条
		for (let i = 0; i < lineCount; i++) {
			let x = 20 + i * lineSpacing; // 线条的x坐标，稍微向右偏移以避免与可能的边框重叠

			// 绘制线条
			ctx.beginPath();
			ctx.moveTo(x, 10); // 线条的起始y坐标，稍微向下偏移以避免与上边框重叠
			ctx.lineTo(x, height);

			let textColor = '#000000'; // 默认文本颜色
			if ([redLine1, redLine2, redLine3].includes(i)) {
				// 特定线条加粗
				ctx.strokeStyle = '#F56C6C';
				ctx.lineWidth = 4;
				textColor = '#F56C6C'; // 设置与线条相同的文本颜色
			} else {
				ctx.strokeStyle = '#000000';
				ctx.lineWidth = 2;
			}
			ctx.stroke();

			// 绘制线条下方的数字
			ctx.fillStyle = textColor; // 文本颜色
			ctx.font = '16px Arial'; // 文本字体和大小
			let text = (i + 1).toString(); // 转换为字符串并格式化（因为i是从0开始的）
			ctx.fillText(text, x - text.length * 8, height + textOffsetY); // 文本位置计算，可能需要调整

			// 注意：text.length * 8 是一个简单的启发式方法来估计文本宽度并居中文本（对于数字来说通常足够）
			// 但对于更复杂的文本或字体，你可能需要使用更精确的方法来测量文本宽度

			// 在特定线条的特定位置绘制黄点
			if (i === redLine1) {
				// 第3条线（索引为2）
				let y = 20 + (380 - 20) * (2 / 3); // 3分之2处
				drawYellowDotWithNumber(x, y, pageData.sampleLocation, (pageData.sampleLength / 2).toString());
			} else if (i === redLine2) {
				// 第6条线（索引为5）
				let y = 20 + (380 - 20) * (1 / 2); // 2分之1处
				drawYellowDotWithNumber(x, y, pageData.sampleLocation * 2, (pageData.sampleLength / 2).toString());
			} else if (i === redLine3) {
				// 第9条线（索引为8）
				let y = 20 + (380 - 20) * (1 / 3); // 3分之1处
				drawYellowDotWithNumber(x, y, Math.round(pageData.sampleLocation * 3 * 10) / 10, (pageData.sampleLength / 2).toString());
			}
		}
		// 绘制黄点及内部数字的函数
		function drawYellowDotWithNumber(x : number, y : number, ridgeDistance : number, sampleLength : string) {
			const dotRadius = 10; // 黄点的半径
			const fontSize = 15; // 数字的字体大小（可能需要调整以确保适合黄点）
			const lineLength = 100; // 绿色线段的长度

			// 设置字体
			ctx.font = `${fontSize}px Arial`;

			// 测量数字的宽度和高度（近似值，因为高度通常与字体大小相当）
			const textWidth = ctx.measureText(ridgeDistance.toString()).width;

			// 计算文本在圆内的居中位置（这里我们假设文本是正方形的，并稍微偏移以适应圆形）
			const textX = x - textWidth / 2;
			const textY = y + dotRadius / 2; // 稍微向上偏移以适应圆形边界

			// 绘制绿色线段
			ctx.beginPath();
			ctx.moveTo(x, y - lineLength / 2); // 左侧线段的起点
			ctx.lineTo(x, y + lineLength / 2); // 右侧线段的终点
			ctx.strokeStyle = '#67C23A';
			ctx.lineWidth = 4; // 确保绿线与红线有相同的宽度
			ctx.stroke();

			// 绘制黄点
			ctx.beginPath();
			ctx.arc(x, y, dotRadius, 0, 2 * Math.PI);
			ctx.fillStyle = 'yellow';
			ctx.fill();

			// 绘制黄点数字
			ctx.fillStyle = '#000000'; // 假设数字是黑色的
			ctx.fillText(ridgeDistance.toString(), textX, textY);

			{
				// 计算并绘制文本位置
				const textX = x - fontSize - 5; // 文本的水平位置，稍微偏离黄点
				// 上下两个数字的垂直位置
				const textY1 = y - lineLength / 4 - fontSize / 2; // 上方数字的垂直中心
				const textY2 = y + lineLength / 2 - fontSize / 2; // 下方数字的垂直中心

				// 绘制文本
				ctx.font = `${fontSize}px Arial`;
				ctx.fillStyle = 'black'; // 文本颜色
				ctx.fillText(sampleLength, textX, textY1); // 上方数字
				ctx.fillText(sampleLength, textX, textY2); // 下方数字
			}
		}
		// 绘制完成
		ctx.draw(true);
	};
</script>

<style scoped lang="scss">
	@mixin hv {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #303133;

		.up-row {
			width: 70%;
			margin-top: 20rpx;

			.item {
				@include hv();

				.title {
					width: 100%;
					background-color: #f3f4f6;
					@include hv();
					font-size: 20rpx;
					flex-direction: row;
					position: relative;
					.ordinal{
						position: absolute;
						left: 0;
						width: 20rpx;
						height: 20rpx;
						background-color: #F56C6C;
						border-radius: 50%;
						@include hv();
						color: #f4f4f5;
						font-size: 15rpx;
						margin-left: 5rpx;
					}
					.greenbg{
						background-color: #67c23a;
					}
					.title_name {
						width: 90rpx;
						text-align: justify;
						text-align-last: justify;
					}
				}

				.value {
					border-top: none;
					/* 上边框无 */
					border-right: 2rpx dashed #e6e6e6;
					/* 右边框为虚线 */
					border-bottom: 2rpx dashed #e6e6e6;
					/* 下边框为虚线 */
					border-left: 2rpx dashed #e6e6e6;
					/* 左边框为虚线 */
					box-sizing: border-box;
					width: 100%;
					height: 30rpx;
					font-size: 15rpx;

					@include hv();
				}
			}
		}

		.result {
			border: 2rpx dotted #67c23a;
			width: 70%;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 20rpx;
			border-radius: 10rpx;
			box-sizing: border-box;

			.tip {
				width: 120rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 70rpx;
				background-color: #67c23a;
				color: #fff;
				border-radius: 50%;
			}

			.list {
				width: 250rpx;
				.list-item {
					margin: 10rpx 0;
					font-size: 28rpx;
					@include hv();
					flex-direction: row;
					justify-content: space-between;
					.ridgeDistance,.sampleLocation{
						width: 40%;
						text-align: justify;
						text-align-last: justify;
					}
					.up-icon {
						margin: 0 5rpx;
					}
					text {
						color: #606266;
					}
				}
				
			}

			.sampleStyle {
				font-weight: bold;
				font-size: 25rpx;
			}
		}

		canvas {
			margin: 40rpx 0;
		}
	}
</style>